<template>
	<view class="content">
		<view class="container_img" @longtap="longtap">
			<image  v-if="!baseBack" src="../../../static/icon/ewm_code.jpg"  class="content_img"   mode=""></image>
			<image v-else :src="imgUrl+baseBack" class="content_img" mode=""></image>
			<image :src="imgUrl+codeUrl" mode="" class="container_img_ewm"></image>
			<image src="../../../static/icon/zhiwen.png" mode="" class="container_img_zw"></image>
		</view>
		<view class="code_list">
			<view class="today display align-items"><text></text>如何赚钱</view>
			<view class="list">
				<view class="left">
					第一步
				</view>
				<view class="right">
					转发商品链接或商品图片给微信好友；
				</view>
			</view>
			<view class="list">
				<view class="left">
					第二步
				</view>
				<view class="right">
					从您转发的链接或图片进入商城的好友，系统将自动锁定成为您的客户，他们在微信商品城中购买任何产品，您都可以获得分销佣金；
				</view>
			</view>
			<view class="list">
				<view class="left">
					第三步
				</view>
				<view class="right">
					您可以在奖励中心查看[我的团队]和[分销订单]，好友支付成功后佣金即刻到账。
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="top">
				说明：
			</view>
			<view class="bot" >
				分享后会带有独有的推荐码，您的好友访问之后，系统会自动检测并记录客户关系。如果您的好友已被其他人抢先发展成了客户，他就不能成为您的客户，以最早发展成为客户为准。
			</view>
		</view>
		<view style="height: 48rpx;"></view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../../components/isLogin.vue'
	import checktime from '../../../util/formTime.js'
	export default {
		data() {
			return {
				rechargeList: [],
				flag: false,
				page: 1,
				limit: 10,
				noOrder: false,
				isLogin: 1,
				imgUrl: null,
				codeUrl: null,
				baseBack:''
			}
		},
		components: {
			isLogin,
		},
		onLoad() {
			
			this.imgUrl = this.$imgUrl
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				uni.showToast({
					icon: 'loading',
					title: '加载中',
				});
				this.getrecharge()
				this.getBaseImageInfo()
				
			}

		},
		onPullDownRefresh() {
			this.page = 1
			this.rechargeList = []
			this.flag = false
			this.noOrder = false
			setTimeout(() => {
				this.getrecharge(() => {
					uni.stopPullDownRefresh()
				})
				this.getBaseImageInfo()
			}, 1000)
		},
		methods: {
			// 长按图片 保存
			longtap() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否保存微信小程序二维码',
					success: function(res) {
						if (res.confirm) {
							that.saveImage()
						} else if (res.cancel) {

						}
					}
				});


			},
			saveImage() {
				var url =this.$api.img+this.$api.distribution.getShareImage+'?openid='+uni.getStorageSync('openid')
				uni.downloadFile({
					url,
					success: (resFile) => {
						console.log(resFile, "resFile");
						if (resFile.statusCode === 200) {
							uni.getSetting({
								success: (res) => {
									if (!res.authSetting["scope.writePhotosAlbum"]) {
										uni.authorize({
											scope: "scope.writePhotosAlbum",
											success: () => {
												uni.saveImageToPhotosAlbum({
													filePath: resFile.tempFilePath,
													success: (res) => {
														return uni.showToast({
															title: "保存成功！",
														});
													},
													fail: (res) => {
														return uni.showToast({
															title: '取消保存二维码',
															icon:'none'
														});
													},
													complete: (res) => {},
												});
											},
											fail: () => {
												uni.showModal({
													title: "您已拒绝获取相册权限",
													content: "是否进入权限管理，调整授权？",
													success: (res) => {
														if (res.confirm) {
															uni.openSetting({
																success: (res) => {
																	console.log(res.authSetting);
																},
															});
														} else if (res.cancel) {
															return uni.showToast({
																title: "已取消！",
																icon:'none'
															});
														}
													},
												});
											},
										});
									} else {
										uni.saveImageToPhotosAlbum({
											filePath: resFile.tempFilePath,
											success: (res) => {
												return uni.showToast({
													title: "保存成功！",
												});
											},
											fail: (res) => {
												return uni.showToast({
													title: res.errMsg,
													icon:'none'
												});
											},
											complete: (res) => {},
										});
									}
								},
								fail: (res) => {},
							});
						} else {
							return uni.showToast({
								title: resFile.errMsg,
								icon:'none'
							});
						}
					},
					fail: (res) => {
						return uni.showToast({
							title: res.errMsg,
							icon:'none'
						});
					},
				});


			},
			// 获取二维码
			getrecharge(callback) {
				let that = this
				
				var data = {
					openid: uni.getStorageSync('openid'),
				}
				this.$myRequest.post(this.$api.distribution.getUcodeQR, data).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						that.codeUrl = res.data.mpqr
						callback && callback()
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
		
			getBaseImageInfo(){
				var data = {
					openid: uni.getStorageSync('openid'),
				}
				this.$myRequest.post(this.$api.distribution.getBaseImage, data).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.baseBack = res.data.image
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				this.getrecharge();
				this.getBaseImageInfo()
		
			},
		}
	}
</script>

<style scoped lang="scss">
	.today {
		padding-left: 7rpx;
		height: 90rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 90rpx;

		text {
			width: 5rpx;
			height: 20rpx;
			background: #4b968d;
			margin-right: 11rpx;
			// margin-top: 5rpx;
		}
	}

	.content {
		.container_img {
			width: 100%;
			height: 1196rpx;
			position: relative;

			.content_img {
				width: 100%;
				height: 100%;
			}

			.container_img_zw {
				width: 246rpx;
				height: 246rpx;
				position: absolute;
				bottom: 60rpx;
				right: 84rpx;
				margin: auto;
			}

			.container_img_ewm {
				width: 246rpx;
				height: 246rpx;
				position: absolute;
				bottom: 60rpx;
				left: 84rpx;
				margin: auto;

			}

			view {
				position: absolute;
				bottom: 20rpx;
				left: 0;
				right: 0;
				margin: auto;
				font-size: 36rpx;
				text-align: center;
				color: #fff;
			}
		}


		.code_list {
			width: 690rpx;
			margin: 0 auto;

			.title {
				color: #666666;
				font-size: 22rpx;
				padding-left: 16rpx;
				border-left: 4rpx solid #294D7C;
				height: 22rpx;
				margin-top: 40rpx;
			}

			.list {
				display: flex;
				padding-top: 30rpx;
				border-bottom: 1rpx solid #E5E5E5;

				.left {
					color: #333333;
					font-size: 26rpx;
					font-weight: bold;
					padding-right: 30rpx;
					flex: 1;
				}

				.right {
					width: 580rpx;
					color: #666666;
					font-size: 24rpx;
					padding-bottom: 28rpx;
				}
			}
		}

		.explain {
			width: 689rpx;
			margin: 0 auto;
			// height: 236rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 10rpx 0px rgba(90, 96, 105, 0.14);
			border-radius: 10rpx;
			margin-top: 38rpx;
			view {
				width: 640rpx;
				color: #294D7C;
				font-size: 24rpx;
				margin: 0 auto;
			}

			.top {
				padding-top: 38rpx;
			}

			.bot {
				padding-bottom: 38rpx;
				
			}
		}
	}
</style>
